<%--
  Created by IntelliJ IDEA.
  User: soft01
  Date: 21-7-21
  Time: 下午1:53
  To change this template use File | Settings | File Templates.
--%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>我的订单</title>
    <!-- 网页图标icon -->
    <link rel="shortcut icon" href="${pageContext.request.contextPath}/images/logn.png" />

    <!-- css -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/swiper.min.css" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css" />
    <link rel="stylesheet" href='${pageContext.request.contextPath}/iconfont/font_1/iconfont.css' />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/style.css" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/front-index.css" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/animate.css" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/myorder.css" />
    <!-- js -->
    <script src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/swiper.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/front-index.js"></script>
    <script src="${pageContext.request.contextPath}/js/template-web.js"></script>
    <script src="${pageContext.request.contextPath}/js/particle.js"></script>

    <script type="text/javascript">
        $(function(){
            canvasParticle();// 使用默认配置
            var offset = 30;
            window.onscroll = function(e){
                // var top = document.documentElement.scrollTop + document.body.scrollTop;
                // console.log(top);
                var ch = document.body.clientHeight;
                var ih = window.innerHeight;

                console.log(ch, e.pageY, ih);

                if(ih + e.pageY >= (ch-offset)){
                    console.log('bottom');
                }

            };

        });

    </script>
</head>
<body>
<div class="wrap-cc">
    <div class="content-cc">

        <!-- head -->
        <nav class="navbar navbar-default">
            <div class="container-fluid" style="box-shadow: 5px 5px 5px #9d9da8;padding-left: 20px;">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <img src="${pageContext.request.contextPath}/images/com-logo1.png" alt="" width="120" style="margin-right: 20px;">
                </div>
                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

                    <form action="" class="navbar-form navbar-left searchInput" style="padding:10px;">
                        <div class="form-group">
                            <input type="text" placeholder="请输入商品名称">
                        </div>
                        <button type="submit" class="btn btn-default "><span class="glyphicon glyphicon-search"></span></button>
                    </form>

                    <!-- <div id="loginOff" class="regist ccc">
                        <span style="margin-right: 20px;font-size: 14px;">下载APP</span>
                        <a href="javascript:openUserModal(false);" class="ccc">登录</a> &nbsp;&nbsp;/&nbsp;&nbsp;
                        <a href="javascript:openUserModal(true);" class="ccc">注册</a>
                    </div> -->

                    <ul id="loginOn" class="nav navbar-nav navbar-right">
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle user-active" data-toggle="dropdown" role="button">
                                <img class="img-circle" src="${pageContext.request.contextPath}/images/user.jpeg" id="userImg">
                                <span class="caret"></span>
                            </a>
                            <ul class="dropdown-menu userinfo cc">
                                <li>
                                    <img src="${pageContext.request.contextPath}/images/user.jpeg" class="img-circle" alt="">
                                    <div class="">
                                        <p>itany</p>
                                        <p>账号余额: ￥<span>236</span></p>
                                    </div>
                                </li>
                                <li>
                                    <a href="front_order.html">
                                        <i class="glyphicon glyphicon-edit"></i> 我的订单
                                    </a>
                                    <a href="front_shopcart.html">
                                        <i class="glyphicon glyphicon-shopping-cart"></i> 购物车
                                    </a>
                                </li>
                                <li>
                                    <a href="#" data-toggle="modal" data-target="#userSet">
                                        <i class="glyphicon glyphicon-cog"></i> 个人设置
                                    </a>
                                    <a href="front_index.html"><i class="glyphicon glyphicon-off"></i> 退出登录</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
                <!-- /.navbar-collapse -->
            </div>
            <!-- /.container-fluid -->
        </nav>
        <!-- nav -->

        <div class="my-content">

            <table class="my-head my-order-details" >
                <thead>
                <tr>
                    <th class="my-pro" >商品信息</th>
                    <th class="my-money" >单价(元)</th>
                    <th class="my-num" >数量</th>
                    <th class="my-order-options" >商品操作</th>
                    <th class="my-money" >实付款(元)</th>
                    <th class="my-order-options" >
                        <select id="order_status" style="width:90px;height:26px;" name="order_status">
                            <option value="-1">状态(全部)</option>
                            <option value="1" >待付款</option>
                            <option value="2" >已付款(待发货)</option>
                            <option value="3" >已发货(待签收)</option>
                            <option value="4" >已签收(待评论)</option>
                            <option value="5" >已评论(完成)</option>
                            <option value="9" >已关闭</option>
                        </select>
                    </th>
                    <th class="my-order-options" >交易操作</th>
                </tr>
                </thead>
                <tbody></tbody>
            </table>

            <!-- 一个订单 begin -->
            <div class="my-order" >
                <span class="my-time" >2019-06-06</span>
                <span class="my-no" >订单编号: itany20190808123456</span>
                <a class="my-remove" href="javascript:;"><i class="glyphicon glyphicon-trash" ></i></a>
            </div>
            <table class="my-order-details" >
                <tbody>
                <tr>
                    <td class="my-pro" >
                        <a href="javascript:;">
                            Java基础入门
                            <img class="my-img" src="${pageContext.request.contextPath}/images/java-base.png" alt="图片加载失败" />
                            Java基础相关书籍 帮您快速掌握Java开发的核心要点
                        </a>
                    </td>
                    <td class="my-money" >
                        <div>￥ 59.9</div>
                    </td>
                    <td class="my-num" >1</td>
                    <td class="my-order-options" >
                        <a href="javascript:;">申请售后</a>
                        <a href="javascript:;">投诉卖家</a>
                    </td>
                    <td class="my-money" >
                        <div>59.90</div>
                        <div>(含运费：0.00)</div>
                    </td>
                    <td class="my-order-options" >
                        <a href="javascript:void(0);">交易成功</a>
                        <a href="javascript:;">订单详情</a>
                        <a href="javascript:;">查看物流</a>
                    </td>
                    <td class="my-order-options" >
                        <input type="button" value="评价" />
                        <input type="button" value="再次购买" />
                    </td>
                </tr>
                </tbody>
            </table>
            <!-- 一个订单 end -->

            <!-- 一个订单 begin -->
            <div class="my-order" >
                <span class="my-time" >2019-06-05</span>
                <span class="my-no" >订单编号: itany20190808023478</span>
                <a class="my-remove" href="javascript:;"><i class="glyphicon glyphicon-trash" ></i></a>
            </div>
            <table class="my-order-details" >
                <tbody>
                <tr>
                    <td class="my-pro" >
                        <a href="javascript:;">
                            Java基础入门
                            <img class="my-img" src="${pageContext.request.contextPath}/images/java-base.png" alt="图片加载失败" />
                            Java基础相关书籍 帮您快速掌握Java开发的核心要点
                        </a>
                    </td>
                    <td class="my-money" >
                        <div class="my-old-money" >￥ 59.9</div>
                        <div>￥ 50.0</div>
                    </td>
                    <td class="my-num" >1</td>
                    <td class="my-order-options" >
                        <a href="javascript:;">申请售后</a>
                        <a href="javascript:;">投诉卖家</a>
                    </td>

                    <td class="my-money" rowspan="2" >
                        <div>100.00</div>
                        <div>(含运费：0.00)</div>
                    </td>
                    <td class="my-order-options" rowspan="2" >
                        <a href="javascript:void(0);">交易成功</a>
                        <a href="javascript:;">订单详情</a>
                        <a href="javascript:;">查看物流</a>
                    </td>
                    <td class="my-order-options" rowspan="2" >
                        <input type="button" value="评价" />
                        <input type="button" value="再次购买" />
                    </td>

                </tr>
                <tr>
                    <td class="my-pro" >
                        <a href="javascript:;">
                            JavaScript基础教程
                            <img class="my-img" src="${pageContext.request.contextPath}/images/javascript-base.png" alt="图片加载失败" />
                            JavaScript基础相关书籍 帮您快速掌握JavaScript开发的核心要点
                        </a>
                    </td>
                    <td class="my-money" >
                        <div class="my-old-money" >￥ 68.9</div>
                        <div>￥ 50.0</div>
                    </td>
                    <td class="my-num" >1</td>
                    <td class="my-order-options" >
                        <a href="javascript:;">申请售后</a>
                        <a href="javascript:;">投诉卖家</a>
                    </td>

                </tr>
                </tbody>
            </table>
            <!-- 一个订单 end -->

            <!-- 一个订单 begin -->
            <div class="my-order" >
                <span class="my-time" >2019-06-03</span>
                <span class="my-no" >订单编号: itany20190808013675</span>
                <a class="my-remove" href="javascript:;"><i class="glyphicon glyphicon-trash" ></i></a>
            </div>
            <table class="my-order-details" >
                <tbody>
                <tr>
                    <td class="my-pro" >
                        <a href="javascript:;">
                            Java基础入门
                            <img class="my-img" src="${pageContext.request.contextPath}/images/java-base.png" alt="图片加载失败" />
                            Java基础相关书籍 帮您快速掌握Java开发的核心要点
                        </a>
                    </td>
                    <td class="my-money" >
                        <div class="my-old-money" >￥ 59.9</div>
                        <div>￥ 50.0</div>
                    </td>
                    <td class="my-num" >1</td>
                    <td class="my-order-options" >
                        <a href="javascript:;">申请售后</a>
                        <a href="javascript:;">投诉卖家</a>
                    </td>

                    <td class="my-money" rowspan="2" >
                        <div>100.00</div>
                        <div>(含运费：0.00)</div>
                    </td>
                    <td class="my-order-options" rowspan="2" >
                        <a href="javascript:void(0);">交易成功</a>
                        <a href="javascript:;">订单详情</a>
                        <a href="javascript:;">查看物流</a>
                    </td>
                    <td class="my-order-options" rowspan="2" >
                        <input type="button" value="评价" />
                        <input type="button" value="再次购买" />
                    </td>

                </tr>
                <tr>
                    <td class="my-pro" >
                        <a href="javascript:;">
                            JavaScript基础教程
                            <img class="my-img" src="${pageContext.request.contextPath}/images/javascript-base.png" alt="图片加载失败" />
                            JavaScript基础相关书籍 帮您快速掌握JavaScript开发的核心要点
                        </a>
                    </td>
                    <td class="my-money" >
                        <div class="my-old-money" >￥ 68.9</div>
                        <div>￥ 50.0</div>
                    </td>
                    <td class="my-num" >1</td>
                    <td class="my-order-options" >
                        <a href="javascript:;">申请售后</a>
                        <a href="javascript:;">投诉卖家</a>
                    </td>

                </tr>
                </tbody>
            </table>
            <!-- 一个订单 end -->

        </div>

    </div>
</div>

<div class="footer-cc">
    <div class="foots">
        <div>版权所有： 南京网博</div>
        <div>Copyright (C) 2002-2019 itany.com 南京市网博优壹职业培训学校 苏ICP备</div>
    </div>
</div>


<div class="modal fade" id="userSet" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">个人信息</h4>
            </div>
            <form action="#" class="form-horizontal" method="post">
                <div class="modal-body">
                    <div class="form-group">
                        <label class="col-sm-3 control-label">旧密码：</label>
                        <div class="col-sm-6">
                            <input class="form-control" type="password" name="password" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">新密码：</label>
                        <div class="col-sm-6">
                            <input class="form-control" type="password" name="newPassword" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">确认密码：</label>
                        <div class="col-sm-6">
                            <input class="form-control" type="password" name="rePassword" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">昵称：</label>
                        <div class="col-sm-6">
                            <input class="form-control" type="text" name="nickname" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">手机号：</label>
                        <div class="col-sm-6">
                            <input class="form-control" type="text" name="phone" />
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-info" data-dismiss="modal" aria-label="Close">关&nbsp;&nbsp;闭</button>
                    <button type="reset" class="btn btn-info">重&nbsp;&nbsp;置</button>
                    <button type="submit" class="btn btn-info">确&nbsp;&nbsp;定</button>
                </div>
            </form>
        </div>
    </div>
</div>
</body>
</html>